<template>
    <div>
        <h1>组合式api的生命周期</h1>
        <div id="box1">{{ msg }}</div>
        <input type="button" value="修改msg" @click="changeMsg">
    </div>
</template>

<script setup >
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";
const msg = ref("hello vue");

const changeMsg = () => {
    msg.value += "1";
}

onBeforeMount(()=>{
    
})



export default {
    setup() {
        const msg = ref("hello vue");


        return {
            msg
        }
    }
    
    
    data() {
        return {
            msg: "hello vue",
            count: 2,
            myTimer: null
        }
    },

    beforeCreate() {
        console.log("beforeCreate");
        console.log("this", this);
        console.log("this.msg", this.msg);//undefined
    },
    created() {
        console.log("created");
        console.log("this.msg", this.msg);//hello vue
        this.myTimer = setInterval(() => {
            console.log("hi");
            // this.count++;
        }, 1000)
    },
    beforeMount() {
        console.log("beforeMount");
        console.log("this.msg", this.msg);//hello vue
        // console.log('document.getElementById("box1")', document.getElementById("box1"));//null
    },
    mounted() {
        console.log("mounted");
        console.log('document.getElementById("box1").innerHTML', document.getElementById("box1").innerHTML);//hello vue

    },
    beforeUpdate() {
        console.log("beforeUpdate");
        console.log("this.msg", this.msg);//hello vue1
        console.log('document.getElementById("box1").innerHTML', document.getElementById("box1").innerHTML);//hello vue
    },
    updated() {
        console.log("updated");
        console.log('document.getElementById("box1").innerHTML', document.getElementById("box1").innerHTML);//hello vue1

    },
    beforeUnmount() {
        console.log("beforeUnmount");
        window.clearInterval(this.myTimer);
    },
    unmounted() {
        console.log("unmounted");
    }
}

</script>

<style lang="css" scoped></style>
